import React, { Component } from 'react';
import '../styles/ConfirmOrder.scss'
import { NavBar, Tabs, Empty, List,Modal,Button ,Toast} from 'antd-mobile'
import * as service from '../api/index'
class ConfirmOrder extends Component {
    constructor(props) {
        super(props)
        this.state = {
             allorderlist:[],
             userid:localStorage.getItem('userid'),
             name:'',
             visible2:false
        }
    }

 async componentDidMount(){

    var res2 = await service.order_confirmOrder({userid:this.state.userid,time:this.props.location.state.time })
    this.setState({allorderlist:res2.data.data,name:res2.data.data[0].name},()=>{
        console.log(this.state.name)
    })
    console.log(res2.data.data)
}
back() {//回退
    this.props.history.push('/index/goodcar')
}
allmoney() {//总价   
    return this.state.allorderlist.reduce((prev, item) => {
        return prev += item.num * parseInt( item.originprice)
    }, 0)  
}
allcount() {//总个数
    return this.state.allorderlist.reduce((prev, item) => {
        return prev += item.num
    }, 0)  
}
handleClick(){
   this.props.history.push({ pathname:'/useraddress',state:{status:0,time:this.props.location.state.time }})
}
    async Confirm2(action, index) {//去支付弹框请求
        if (index == 0) {//确认支付
            var res = await service.order_addOrder({ userid: this.state.userid })
            Toast.show({
                icon: 'loading',
                content: '支付中…',
                afterClose: () => {
                    // this.props.history.push({ pathname: '/Gopay', state: { money: this.allmoney() } })
                    Toast.show({
                        icon: 'success',
                        content: '支付成功',
                      })
                      this.props.history.push('/userorder')
                }
                
            })
        } else if (index == 1) {//取消按钮
        }
    }
    render() {
        return (
            <div className='ConfirmOrder' >
                <div className='header' >
                    <div className="top">
                        <NavBar onBack={() => { this.back() }}>订单查看</NavBar>
                    </div>
                </div>
                  {
                    this.state.name != "" ?
                        <List>
                            <List.Item  onClick={() => { this.handleClick() }} description={this.state.allorderlist[0].province+''+this.state.allorderlist[0].city+''+this.state.allorderlist[0].county+''+this.state.allorderlist[0].addressDetail} clickable>
                                {this.state.name+'  '+this.state.allorderlist[0].tel}
                            </List.Item>
                        </List>
                        :
                        <List>
                            <List.Item onClick={() => { this.handleClick() }}>请添加地址</List.Item>
                        </List>   
                    }   
                <div className="main">
                    {
                        this.state.allorderlist && this.state.allorderlist.length != 0 ?
                            <div className="searchResult_main">
                                {
                                    this.state.allorderlist.map((item, index) => {
                                        return (
                                            <div className="item" key={index} onClick={() => { this.goDetail(item.proid) }}  >
                                                <div className="left">
                                                    <img src={item.img1} alt="" />
                                                </div>
                                                <div className="right">
                                                    <div className="name">{item.proname}</div>
                                                 <div className="bottom">
                                                 <div className="Price">￥{item.originprice}</div>
                                                    <div className="count">x{item.num}</div>
                                                 </div>
                                                </div>
                                            </div>
                                        )
                                    })
                                }
                                <div className="text">
                                    总价:￥{this.allmoney()}
                                </div>
                                <br />
                                <br />
                                <div className="text">
                                    快递费:5元
                                </div>
                            </div>
                            :
                            <div className="nothing">
                                <Empty description='没有商品!'
                                    style={{ padding: '64px 0', backgroundColor: 'white' }}
                                    imageStyle={{ width: 128 }}
                                />
                            </div>
                    }
                    
                </div>
                <div className="MyGoodCar_bottom">
                        <div className="left">
                         
                        </div>
                        <div className="right">
                            <p>总价</p>
                            <span>￥{this.allmoney()}</span>
                            <button className = {this.state.name ? '':'active' }     disabled={ this.state.name ? false:true}      onClick={()=>{this.setState({visible2:!this.state.visible2})}} >
                                去结算({this.allcount()})
                            </button>                         
                        </div>
                        <Modal
                                title='确认支付'
                                visible={this.state.visible2}//控制弹出层显示隐藏
                                closeOnAction={true}//点击操作按钮是否关闭弹出层
                                closeOnMaskClick={true}
                                onClose={() => {//点击按钮的回调函数   
                                    console.log()
                                    this.setState({ visible2: false })
                                }}
                                onAction={(action, index) => { this.Confirm2(action, index) }}
                                actions={[//按钮的文字
                                    {
                                        key: '0',
                                        text: '确认',
                                        primary: true,
                                    },
                                    {
                                        key: '1',
                                        text: '取消',
                                    },

                                ]}
                            />
                    </div>
            </div>
        );
    }
}

export default ConfirmOrder;